<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
</head>
<body>
<div id="maindiv" class="maindiv mainPadding" style="display: none;">    
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        <el-breadcrumb-item>资源释放原因统计</el-breadcrumb-item>
    </el-breadcrumb>    
    <el-row class="marginB20">
        <el-button type="primary" @click="searchYesterday">昨天</el-button>
        <el-button type="success" @click="searchWeek">近七天</el-button>
        <el-button type="warning" @click="searchMonth">本月</el-button>
        <!-- <shiro:hasPermission name="statistics:telemarketingFollow:export"> -->
        <el-button type="danger" @click="exportRs">导出Excel报表</el-button>
        <!-- </shiro:hasPermission> -->
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" :model="form" class="demo-form-inline mainSearchForm" ref="form">
                <el-form-item label="统计日期：">
                    <el-date-picker format="yyyy-MM-dd HH:mm" v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker format="yyyy-MM-dd HH:mm" v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="电销事业部：">  
                    <el-select v-model="form.teleDeptId" placeholder="电销事业部" style="width: 100%;" clearable @change="curTelGroupSale" filterable :disabled="isDisabled">
                        <el-option
                            v-for="item in deptList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销组：">  
                    <el-select v-model="form.teleGroupId" placeholder="电销组" style="width: 100%;" clearable @change="curTelSale" filterable :disabled="isDisabledOrgId">
                        <el-option
                            v-for="item in orgTeleArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销顾问：">  
                  <el-select v-model="form.teleSaleId" placeholder="电销顾问" style="width: 100%;" filterable clearable :disabled="isDisabledUserId">
                      <el-option
                          v-for="item in busSaleArr"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="资源类别：">
                    <el-select v-model="form.category" placeholder="资源类别" clearable filterable>
                        <el-option
                            v-for="item in clueCategoryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable(1)" class="searchBtn" :disabled="loading">搜索</el-button>
                </div>  
            </el-form>
        </div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="margin: 0 auto;">
                <div class="empty-show" v-if="emptyShow" style="width: 100%;text-align: center;position: absolute;left:0;line-height:60px;font-size: 14px;color: #909399;">暂无数据</div>
                <div id="pieReport" style="width: 830px;height: 400px;margin: 10px auto;"></div>
            </div>
          </el-col>
        </el-row>
    </div>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:src="@{/js/common/echarts.min.js?v=1.0.0}"></script>
<script th:inline="javascript">
    var deptList=[[${deptList}]];// 事业部
    var clueCategoryList=[[${clueCategoryList}]];// 资源类别
    var curDeptId =[[${deptId}]]; // 当前用户事业部Id
    var curOrgId = [[${teleGroupId}]]; // 当前用户电销组id
    var curUserId = [[${teleSaleId}]]; // 当前用户顾问Id
    var mainDivVM = new Vue({
        el: '#maindiv',
        data: function() {
            return {
                loading: false,
                isDisabled: false,
                isDisabledOrgId: false,
                isDisabledUserId: false,
                // pager:{
                //     total: 0,
                //     currentPage: 1,
                //     pageSize: 20,
                // },
                form: {
                    startTime:'',
                    endTime:'',
                    teleDeptId: '',
                    teleGroupId: '',
                    teleSaleId: '',
                    category: ''
                },
                export: {
                    startTime:'',
                    endTime:'',
                    teleDeptId: '',
                    teleGroupId: '',
                    teleSaleId: '',
                    category: ''
                },
                // tableData: [],
                deptList: deptList, // 电销事业部
                orgTeleArr: '', // 商务组
                busSaleArr: '', // 商务经理
                clueCategoryList: clueCategoryList, // 资源类别

                myChart: "",
                legendData: [],
                seriesData: [],
                emptyShow: false,
            }             
        },
        methods: {
          initEcharts(id){
            this.myChart = echarts.init(document.getElementById(id));
          },
          drawPie(data) {
            this.myChart.setOption({
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}：{c} <br/>占比：({d}%)"
                // function(params) {
                    // var tmp = '';
                    // for(var i = 0;i<data.length;i++){
                    //   if(params.name==data[i].name){
                    //     tmp += '释放原因<br/>' + data[i].name+'：'+ data[i].reason +'<br>占比：{d}%';
                    //     }
                    // }
                    // return tmp;
                // }
              },
              legend: {
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                textStyle:{
                  fontSize: 14
                },
                data: this.legendData,
              },
              calculable: true,
              series: [
                {
                  name: "释放原因",
                  type: "pie",
                  radius: "65%",
                  center: ["50%", "50%"],
                  color: [ '#df9499', '#2ec7c9','#b6a2de', '#5ab1ef', '#ffb980','#f67d08','#f7687c','#eb68f7','#a3f11c','#1ABC9C','#06aecc'],
                  itemStyle: {
                    normal: {
                      label: {
                        fontSize: 14,
                      }
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    },
                  },
                  data: this.seriesData
                }
              ]
            });
          },  
            firstCurTelSale(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.getTelSale(seleVal);
            },
            curTelSale(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.form.teleSaleId = '';
                this.getTelSale(seleVal);
            },
            firstCurTelGroupSale(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.getTelGroupSale(seleVal);
            },
            curTelGroupSale(seleVal){
                if(seleVal==null||seleVal==""){
                    return ;
                }
                this.form.teleGroupId = '';
                this.form.teleSaleId = '';
                this.getTelGroupSale(seleVal);
            },
            getTelGroupSale(seleVal){
                param={};
                param.parentId=seleVal;
                param.orgType=1;
                axios.post('/base/getGroupList',param).then(function (response) {
                    mainDivVM.orgTeleArr=response.data.data;
                }).catch(function (error) {
                        mainDivVM.$message({
                        message: "电销组请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            getTelSale(seleVal){
                param={};
                param.orgId=seleVal;
                param.roleCode="DXCYGW";
                axios.post('/base/getSaleList' ,param).then(function (response) {  
                    mainDivVM.busSaleArr=response.data.data;
                }).catch(function (error) {
                        mainDivVM.$message({
                        message: "电销顾问请求失败，请稍后重试",
                        type: "error"
                    });
                });
            },
            searchTable() {
                var startTime = this.form.startTime;
                var endTime = this.form.endTime;
                if(endTime && startTime){
                    startTime = new Date(this.form.startTime);
                    endTime = new Date(this.form.endTime);
                    if(startTime>endTime){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                        });
                        return;
                    }
                    var date = new Date();
                    var currentDate = moment(date).format("YYYY-MM-DD 23:59");
                    date.setMonth(date.getMonth()-6);
                    var beforeSixMonth = moment(date).format("YYYY-MM-DD 00:00");
                    var currentDateRes = new Date(currentDate);
                    var beforeSixMonthRes = new Date(beforeSixMonth);
                    if(startTime < beforeSixMonthRes || endTime > currentDateRes){
                        this.$message({
                            message: '请选择近6个月内的时间',
                            type: 'warning'
                        });
                        return;
                    }
                    startTime = this.limitTime(startTime, null);
                    endTime = this.limitTime(null, endTime);
                }else{
                    this.$message({
                        message: '请选择起止时间',
                        type: 'warning'
                    });
                    return;
                }
    
                var param = {};
                param.startTime = this.minuteFormat(startTime);
                param.endTime = this.minuteFormat(endTime);
                param.category = this.form.category;
                param.teleDeptId = this.form.teleDeptId;
                param.teleGroupId = this.form.teleGroupId;
                param.teleSaleId = this.form.teleSaleId;

                this.emptyShow = false; 
                this.myChart.showLoading({color: '#C0DEFC'});
                axios.post('/resourceFreed/queryList',param).then(function (response) {
                    if(!response || !response.data){
                        mainDivVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.seriesData = [];
                        mainDivVM.drawPie(mainDivVM.seriesData);
                        mainDivVM.emptyShow = true;
                        mainDivVM.myChart.hideLoading();
                        return ;
                    }
                    var resobj= response.data;
                    if(resobj.code != '0'){
                        mainDivVM.$message({
                            message: resobj.msg,
                            type: 'error'
                        });
                        mainDivVM.seriesData = [];
                        mainDivVM.drawPie(mainDivVM.seriesData);
                        mainDivVM.emptyShow = true;
                        mainDivVM.myChart.hideLoading();
                        return ;
                    }else if(resobj.data){
                        var resobjData = resobj.data;
                        if(resobjData.length){
                            mainDivVM.seriesData = resobjData;
                            mainDivVM.drawPie(mainDivVM.seriesData);
                        }else{
                            mainDivVM.seriesData = [];
                            mainDivVM.drawPie(mainDivVM.seriesData);
                            mainDivVM.emptyShow = true;
                        }
                        mainDivVM.export.startTime = mainDivVM.minuteFormat(startTime);
                        mainDivVM.export.endTime = mainDivVM.minuteFormat(endTime);
                        mainDivVM.export.category = mainDivVM.form.category;
                        mainDivVM.export.teleDeptId = mainDivVM.form.teleDeptId;
                        mainDivVM.export.teleGroupId = mainDivVM.form.teleGroupId;
                        mainDivVM.export.teleSaleId = mainDivVM.form.teleSaleId;
                        mainDivVM.myChart.hideLoading();
                    }else{
                        mainDivVM.seriesData = [];
                        mainDivVM.drawPie(mainDivVM.seriesData);
                        mainDivVM.emptyShow = true;
                        mainDivVM.myChart.hideLoading();
                    }
                }).catch(function (error) {
                    mainDivVM.seriesData = [];
                    mainDivVM.drawPie(mainDivVM.seriesData);
                    mainDivVM.emptyShow = true;
                    mainDivVM.myChart.hideLoading();
                    mainDivVM.$message({
                        message: "请求失败，请稍后重试",
                        type: "error"
                    });
                });
                
            },
            limitTime (start, end) {
                var endTime = this.minuteFormat (end);
                var startTime = this.minuteFormat (start);
                var date = new Date();
                data = this.minuteFormat (date);// 现在的时间
                data = data.slice(0,8);
                if(startTime){
                    var s = startTime.slice(0,8);
                    if(s < data){
                        this.form.startTime = moment(start).format("YYYY-MM-DD 00:00");
                        return this.form.startTime;
                    }
                    return start;
                }
                if(endTime){
                    var e = endTime.slice(0,8);
                    if(e < data){
                        this.form.endTime = moment(end).format("YYYY-MM-DD 23:59");
                        return this.form.endTime;                        
                    }
                    return end;
                }
            },
            arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并第一行
                if (rowIndex === 0) {
                    if (columnIndex === 0) {
                        return [0, 0];
                    } else if (columnIndex === 1) {
                        return [1, 2];
                    }
                }
            },
            indexFun (index) { // 表格序号
                return index;
            },
            //百分比格式话
            percentFormat(percent) {
                if (!percent) { // 如果没有值或值为0
                    return 0 + "%";
                }
                percent = (percent * 1000) / 10 + "%";
                return percent;
            },
            minuteFormat (m) {
                if (!m) {return "";}
                var timeStr = new Date(m);
                var yearRes = timeStr.getFullYear()
                var monthRea = timeStr.getMonth()+1;
                monthRea = monthRea < 10 ?  "0" + monthRea : monthRea;
                var dateRes = timeStr.getDate();
                dateRes = dateRes < 10 ?  "0" + dateRes : dateRes;  
                var hoursRes = timeStr.getHours();
                hoursRes = hoursRes < 10 ?  "0" + hoursRes : hoursRes;  
                var minRes = timeStr.getMinutes();
                minRes = minRes < 10 ?  "0" + minRes : minRes;                
                var timeRes = "" + yearRes + monthRea + dateRes + hoursRes + minRes;
                return timeRes;
            },
            searchYesterday(){ // 昨天
                var today = new Date();
                today.setTime(today.getTime()-24*60*60*1000);
                var startTime = today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate()+" 00:00";
                var endTime =today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate()+" 23:59";
                this.form.startTime=startTime;
                this.form.endTime=endTime;
                this.searchTable(1);
            },
            searchWeek(){ // 近七天
                var a = new Date();
                var year = a.getFullYear();
                var month = a.getMonth();
                var date = a.getDate();
                var b = new Date(year,month,date);
                var c = b.valueOf()-6*24*60*60*1000;
                var d = b.valueOf();
                var startTime= new Date(c);
                var endTime = new Date(d);
                this.form.startTime=startTime.getFullYear()+"-" + (startTime.getMonth()+1) + "-" + startTime.getDate()+" 00:00";
                this.form.endTime=endTime.getFullYear()+"-" + (endTime.getMonth()+1) + "-" + endTime.getDate()+" 23:59";
                this.searchTable(1);
            },
            searchMonth(){ // 本月 
                var a = new Date();
                var year = a.getFullYear();
                var month = a.getMonth();
                var date = a.getDate();
                var b = new Date(year,month,date);
                var f= new Date(year,month,01);
                var c = f.valueOf();
                var startTime= new Date(c);
                this.form.startTime=startTime.getFullYear()+"-" + (startTime.getMonth()+1) + "-" + startTime.getDate()+" 00:00";
                this.form.endTime=year+"-"+(month+1)+"-"+date+" 23:59";
                this.searchTable(1);
            },
            exportRs(){
                var param = {};
                param.startTime = this.export.startTime;
                param.endTime = this.export.endTime;
                param.category = this.export.category;
                param.teleDeptId =  this.export.teleDeptId;
                param.teleGroupId = this.export.teleGroupId;
                param.teleSaleId = this.export.teleSaleId;
                axios.post('/resourceFreed/export',param,{responseType:'blob'})
                .then(function (response) {
                    var data =  response.data;
                    var fileName = response.headers.filename;
                    saveAs(data,decodeURI(fileName));
                })
                .catch(function (error) {
                    mainDivVM.$message({
                        message: "导出失败，请稍后重试",
                        type: "error"
                    });
                });
            }
        },
        created(){     
            var today = new Date();
            var startTime = moment(today).format("YYYY-MM-DD 00:00");
            var endTime = moment(today).format("YYYY-MM-DD 23:59");
            this.form.startTime=startTime;
            this.form.endTime=endTime; 
            if(curDeptId){
                this.isDisabled = true;
                this.form.teleDeptId = curDeptId;
                this.firstCurTelGroupSale(curDeptId);
                if(curOrgId){
                    this.isDisabledOrgId = true;
                    this.form.teleGroupId = curOrgId;
                    this.firstCurTelSale(curOrgId);
                    if(curUserId){
                        this.isDisabledUserId = true;
                        this.form.teleSaleId = curUserId;
                    }
                }
                this.export.teleDeptId = this.form.curDeptId;
                this.export.teleGroupId = this.form.curOrgId;
                this.export.teleSaleId = this.form.curUserId;
            }
            this.export.startTime = this.minuteFormat(this.form.startTime);
            this.export.endTime = this.minuteFormat(this.form.endTime);
        },
        mounted(){
            document.getElementById('maindiv').style.display = 'block';
            this.$nextTick(function() {
                this.initEcharts("pieReport");
                this.searchTable();
            });
        }
    })
    
</script>
</html>
